<style scoped>
.cart{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.cart_title{
    font-size: 45px;
    margin-left: 5%;
    margin-right: 5%;
    border-bottom: 2px rgb(11, 235, 243) dotted;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.cart_title div{
    display: flex;
    flex-direction: row;
}
.cart_content{
    margin-left: 5%;
    margin-right: 5%;
    display: flex;
    flex-direction: column;
}

</style>

<template>
    <div class="cart">
        <v-nav-top/>
        <div class="cart_title"> Cart
            <div><v-buy-pop :fromItem="false" :tableData="tableData"/><el-button type="warning" style="margin-left:50px" @click="removeCarts">Remove</el-button></div>
        </div>
        <div class="cart_content">
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column label="Goods Introduction">
                    <template slot-scope="scope" >
                        <img :src="scope.row.picurl" alt="" height="100px" width="120px">
                    </template>
                </el-table-column>
                <el-table-column>
                    <template slot-scope="scope" >
                        <p>{{scope.row.dcsn}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="category" label="Category "></el-table-column>
                <el-table-column prop="listprice" label="List Price"></el-table-column>
                <el-table-column prop="itemid" label="ItemId"></el-table-column>
                <el-table-column prop="quantity" label="Quantity">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.quantity" @change="changeQuantity(scope.row.itemid, scope.row.quantity)" :min="1" :max="10" style="width:130px"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column label="Checked">
                    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.checked"/>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import nav from '@/components/nav.vue'
import buyPop from '@/components/cart/buyGoods.vue'

export default {
    name: 'cart',
    components: {
        'v-nav-top': nav,
        'v-buy-pop': buyPop
    },
    data () {
        return { tableData:[] }
    },
    mounted(){
        this.getData();
    },
    methods:{
        getData(){
            this.$Axios({
                method: 'get',
                url: '/order/carts'
            }).then(res=>{
                this.tableData = res.data.data;
            }).catch(error=>{
                this.$message.error("其他服务器错误"+error);
            })
        },
        changeQuantity(itemid, num){
            let args = {
                itemid: itemid,
                num: num,
            };
            this.$Axios({
                method: 'post',
                url: '/order/carts-num',
                data:args,
            }).then(res=>{
                return;
            }).catch(error=>{
                this.$message.error("其他服务器错误"+error);
            })
        },
        removeCarts(){
            this.tableData.forEach(e=>{
                if(e.checked == true){
                    this.removeCartsRequest();
                    return;
                }
                this.$message.warning("您还未选择任何物品")
            })
        },
        removeCartsRequest(){
            let cart_list = [];
            this.tableData.forEach(e=>{
                if(e.checked == true){
                    cart_list.push(e.cartid);
                }
            });
            this.$Axios({
                method: 'post',
                url: 'order/remove-carts',
                data: cart_list,
            }).then(res=>{
                this.$message.success("删除成功");
            }).catch(error=>{
                this.$message.error("其他服务器错误"+error);
            })
        }
    }
}
</script>